.user {
  height: 100vh;
  overflow: hidden;

  .user-custom-navigation {
    background-color: #00bee3;
  }

  .user-body {
    .user-body-account {
      background: linear-gradient(to bottom, #00bee3, #fff);
      height: 300rpx;
      overflow: hidden;

      .user-body-account-info {
        height: 135rpx;
        display: flex;
        align-items: center;
        margin-top: 10rpx;

        .user-body-account-avatar {
          width: 130rpx;
          height: 130rpx;
          border: 2px solid white;
          border-radius: 999rpx;
          margin-left: 25rpx;
        }

        .user-body-account-already-login {
          margin-left: 25rpx;
          font-size: 30rpx;
          color: #fff;
        }

        .user-body-account-logout {
          margin-left: 25rpx;
          color: white;
          font-size: 30rpx;
        }
      }

    }

    .user-body-order {
      background-color: rgba(255, 255, 255, 0.8);
      margin: 0 20rpx;
      border-radius: 30rpx;
      padding: 20rpx;
      margin-top: -150rpx;

      .user-body-order-header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .user-body-order-header-left {
          font-size: 35rpx;

        }

        .user-body-order-header-right {
          font-size: 30rpx;
          color: #8d9090;
        }

      }

      .user-body-order-items {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        margin-top: 15rpx;
        margin-bottom: 10rpx;

        .user-body-order-item {
          display: flex;
          flex-direction: column;
          align-items: center;

          .user-body-order-item-text {
            font-size: 25rpx;
            margin-top: 10rpx;
          }
        }
      }

    }

    .user-body-wallet {
      margin-top: 10rpx;
      background-color: rgba(255, 255, 255, 0.8);
      margin: 0 20rpx;
      border-radius: 30rpx;
      padding: 20rpx;
      margin-top: 10rpx;

      .user-body-wallet-header {
        font-size: 35rpx;
      }

      .user-body-wallet-body {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;

        .user-body-wallet-body-item {
          padding-left: 20rpx;
          border-right: 1px solid #e4e4e4;
          margin-top: 38rpx;

          .user-body-wallet-body-item-first-row {
            display: flex;

            .user-body-wallet-body-item-first-row-title {
              font-size: 28rpx;
              color: #636363;
            }

            .user-body-wallet-body-item-first-row-icon {
              width: 40rpx;
              height: 40rpx;
              margin-left: 10rpx;
            }
          }

          .user-body-wallet-body-item-count {
            font-size: 30rpx;
            color: #343434;
            font-weight: 600;
            margin-top: 20rpx;
          }
        }

        .point {
          border-right: none;
        }
      }
    }

    .user-body-function {
      border-radius: 30rpx;
      margin: 0 20rpx;
      margin-top: 10rpx;
      border-radius: 30rpx;
      overflow: hidden;
      background-color: #fff;
      padding-left: 20rpx;

      .user-body-function-item {
        height: 100rpx;
        display: flex;
        align-items: center;
        position: relative;

        .user-body-function-item-icon {
          height: 40rpx;
          width: 40rpx;
        }

        .user-body-function-item-text {
          margin-left: 15rpx;
        }

        .user-body-function-item-arrow {
          position: absolute;
          right: 20rpx;
        }
      }
    }

    .user-body-bottom-empty {
      height: 50rpx;
    }
  }
}